<template>
  <div class="player">
    <d-player :video="video"
              :autoplay="autoplay"
              :contextmenu="contextmenu"
              screenshot="true"
              @play="play"
              ref="player">
    </d-player>
    <!-- <button class="btn btn-primary" @click="switchHandle">切换视频</button> -->
  </div>
</template>

<script>
  import VueDPlayer from 'vue-dplayer'
  export default {
    data() {
      return {
        video: {
          url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
          pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
        },
        videoUrl: 'http://static.smartisanos.cn/common/video/video-jgpro.mp4',
        autoplay: false,
        player: null,
        contextmenu: [
            {
                text: 'GitHub',
                link: 'https://github.com/MoePlayer/vue-dplayer'
            }
        ]
      }
    },
    mounted() {
      this.player = this.$refs.player.dp
    },
    methods: {
      play() {
        console.log('play callback')
      },
      switchHandle() {
        this.player.switchVideo({
          url: 'http://static.smartisanos.cn/common/video/video-jgpro.mp4'
        })
      }
    },
    components: {
      'd-player': VueDPlayer,
    }
  }
</script>

<style scoped>
  .player {
    text-align: center;
    width:70%;
    margin:0 auto;
  }
  a {
    color: #42b983;
    text-decoration: none;
  }
  .dplayer {
    width: 100%;
    margin: 50px auto;
  }
  h1 {
    font-size: 54px;
    color: #42b983;
    /* margin: 30px 0 10px; */
  }
  h2 {
    font-size: 22px;
    color: #555;
  }
  @media (max-width: 768px) {
    .dplayer {
      width: 90%;
    }
    h1 {
      font-size: 30px;
    }
    h2 {
      font-size: 16px;
    }
  }
</style>
